<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>repeat-on-break: auto</title>
    <style>
        @page {
            size: 820px;
        }
        @-epubx-page-template {
            .partition {
                width: 398px;
                height: 198px;
                border: rgba(0, 0, 255, 0.2) solid 1px;
                -epubx-flow-from: body;
            }
            .left {
                left: 10px;
            }
            .right {
                right: 10px;
            }

            @-epubx-page-master {
                @-epubx-partition {
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 10px;
                    font-size: 10px;
                    line-height: 10px;
                    text-align: center;
                    content: counter(page);
                }
                @-epubx-partition class(partition) class(right) {
                    top: 610px;
                }
                @-epubx-partition class(partition) class(right) {
                    top: 410px;
                }
                @-epubx-partition class(partition) class(right) {
                    top: 210px;
                }
                @-epubx-partition class(partition) class(right) {
                    top: 10px;
                }
                @-epubx-partition class(partition) class(left) {
                    top: 610px;
                }
                @-epubx-partition class(partition) class(left) {
                    top: 410px;
                }
                @-epubx-partition class(partition) class(left) {
                    top: 210px;
                }
                @-epubx-partition class(partition) class(left) {
                    top: 10px;
                }
            }
        }
        :root {
            font-size: 10px;
            line-height: 12px;
            widows: 1;
            orphans: 1;
        }
        body {
            margin: 0 10px;
        }
        section {
            break-after: column;
        }
        h1 {
          font-size: 10px;
          font-weight: normal;
        }

        .header {
            repeat-on-break: header;
            background-color: #FF9999 !important;
        }
        .footer {
            repeat-on-break: footer;
            background-color: #9999FF !important;
        }

        .box {
            height: 20px;
            border: 1px solid #999;
            margin: 2px;
            padding: 2px;
        }

        .flexbox {
          display: flex;
          flex-direction: row;
        }
        .flexbox.row {
          flex-direction: row;
        }
        .flexbox.column {
          flex-direction: column;
        }
    </style>
</head>
<body>


<section>
    <h1>(1) flexbox: row (header/footer is not supported in the flex item)</h1>
    <div>
        <div class="box header">this is header of parent</div>
        <div class="box footer">this is footer of parent</div>
        <div class="box">content1</div>
        <div class="flexbox row">
            <div class="item">
                <div class="box header">header of item1</div>
                <div class="box footer">footer of item1</div>
                <div class="box">item1</div>
            </div>
            <div class="item">
                <div class="box">item2</div>
                <div class="box header">header of item2</div>
                <div class="box footer">footer of item2</div>
            </div>
            <div class="item">
                <div class="box header">header of item3</div>
                <div class="box footer">footer of item3</div>
                <div class="box">item3</div>
            </div>
        </div>
        <div class="box">content2</div>
    </div>
</section>

<section>
    <h1>(2) flexbox:column (header/footer is not supported in the flex item)</h1>
    <div>
        <div class="box header">this is header of parent</div>
        <div class="box footer">this is footer of parent</div>
        <div class="box">content1</div>
        <div class="flexbox column">
            <div class="item">
                <div class="box header">header of item1</div>
                <div class="box footer">footer of item1</div>
                <div class="box">item1</div>
            </div>
            <div class="item">
                <div class="box">item2</div>
                <div class="box header">header of item2</div>
                <div class="box footer">footer of item2</div>
            </div>
            <div class="item">
                <div class="box header">header of item3</div>
                <div class="box footer">footer of item3</div>
                <div class="box">item3</div>
            </div>
        </div>
        <div class="box">content2</div>
    </div>
</section>

</body>
</html>
